px , em , rem

❓질문

길이 단위 px, em, rem에 대해 각각 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

px는 픽셀 단위를 기준으로 하는 단위입니다 이 단위는 절대적인 크기를 의미하며 해상도나 사용자 설정에 영향을 받지 않습니다. font-size : 16px으로 설정하면 항상 16px인거입니다. 즉 간단하게 정확하게 크기를 명시할때 사용합니다. 유연성은 떨어질 수 있습니다.

em은 현재 요소나 부모 요소의 폰트 사이즈를 기준으로 하는 상대적인 단위입니다. 세팅값이 없다면 브라우저의 기본단위 16px이 1em으로 계산되며 부모요소의 값이 20px이라면 1em은 20px을 의마힙니다.

rem은 최상단 HTML요소의 폰트사이즈를 따라갑니다. 즉 전역적으로 일관되게 사용할때 많이 사용합니다 그리고 px이랑 다르게 해상도나 사용자 설정 즉 최상단 HTML요소에 변화가 생기면 rem도 변하기때문에 유연성이 높다는 장점이 있습니다.

🏫 정리한 내용

그렇다면 em과 rem은 모두 상대 단위인데 rem을 사용하지 않고 em을 사용해야하는 경우가 있을까요? 에 특정 상황에서 해당 컨텍스트에 따라 상대적인 크기를 지정해야할 경우에 보통 사용합니다 em은 부모요소 혹은 현재 요소에 폰트 사이즈를 기준으로 크기가 결정되므로, 구성 요소 간의 비례적인 크기를 쉽게 조정할 수 있습니다.

예를 들어, 버튼 안의 텍스트와 패딩을 비율로 정의하고 싶을 때, 각각의 속성에 em을 사용하면 텍스트 크기를 조정될 때 패딩이 자연스럽게 비례적으로 조정되도록 할 수 있습니다.